body {
  padding: 0;
}

.container {
  @apply bg-primary p-2 overflow-hidden h-full flex-1 flex;

  div {
    &.content {
      @apply ml-2 flex-1;
    }
    &.categories {
      @apply text-xs text-t-primary overflow-y-auto bg-secondary rounded-lg basis-40;

      a {
        @apply px-2 py-2 cursor-pointer flex items-center justify-between gap-1 mx-1 my-1 hover:bg-secondary;
        -webkit-user-drag: none;

        &.active {
          @apply bg-active text-t-active rounded-sm;
        }

        &:hover {
          @apply bg-hover text-t-active;
        }

        .cateName {
          @apply flex gap-1 items-center;
          width: calc(100% - 20px);
        }
        .iconWrapper {
          flex: 0 0 auto;

          > span {
            @apply hidden;
          }
        }

        &:hover .iconWrapper > span {
          @apply inline;
        }
      }

      .cateEditContainer {
        @apply cursor-pointer flex items-center justify-between gap-1 mx-1 my-1 hover:bg-secondary;
      }
    }
  }
}

.dragging {
  @apply bg-slate-400 text-t-active;
}
